<template>
  <div class="cover-shop-activity" @click="close">
    <!-- @click.stop="" 是为了防止wrapper上面的点击事件冒泡给根元素,误触发根元素所绑定的click事件 -->
    <div class="wrapper" @click.stop="">
      <h2>优惠活动</h2>
      <i class="iconfont icon-close-bold" @click="close"></i>
      <ul class="activity-list">
        <li>
          <span class="green">首单</span>
          新用户下单立减17元(不与其它活动同享)
        </li>
        <li>
          <span class="red">满减</span>
          满35减19，满65减35
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
        <li>
          <span class="orange">特价</span>
          【立减19.5元】欢乐小食餐
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit("closeCoverShopAcitivity")
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.cover-shop-activity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  .wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 24rem;
    padding: 2rem 3rem;
    background-color: #fcfcfc;
    border-top: 0.1rem solid #eeeeee;
    h2 {
      text-align: center;
      font-size: 2rem;
      font-weight: 600;
      margin: 0 0 1.5rem 0;
    }
    .icon-close-bold {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 2rem;
      color: #333333;
    }
    ul {
      height: 16rem;
      overflow-y: auto;
      li {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 1.3rem;
        margin: 0 0 1.2rem 0;
        span {
          width: 3.6rem;
          height: 1.8rem;
          line-height: 1.8rem;
          text-align: center;
          font-size: 1.2rem;
          border-radius: 0.3rem;
          margin-right: 1rem;
        }
      }
    }
  }
}

.green {
  color: #fff !important;
  background-color: #70bc46 !important;
}
.red {
  color: #fff !important;
  background-color: #ee6060 !important;
}
.orange {
  color: #fff !important;
  background-color: orange !important;
}
</style>
